<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:800px;border: solid 1px black;overflow: hidden;}
    .goods{width:200px;border: solid 1px black;box-sizing: border-box;float: left;text-align: center;}
    .goods p{line-height: 20px;margin: 10px;height: 40px;overflow: hidden;}
    .goods img{width:80%;}
  </style>
</head>
<body>
  
</body>
<script>

  
  // 对象：无序打包，键值对
  // 用来描述一个个体的多个无关联数据

  // 数组：有序打包，索引
  // 用来描述多个同类型数据


  // 一个商品：名称，图片，价格
  // 打包成对象 

  // 多个商品
  // 打包成数组

  var arr = [{
    name:"vivo iQOO Neo7 12GB+256GB 几何黑 天玑9000+ 独显芯片Pro+ E5柔性直屏",
    price:2999,
    img:"https://img10.360buyimg.com/n7/jfs/t1/132804/18/30864/49769/64216544Fceeb2410/e65b93582cdd6e2e.jpg"
  },{
    name:"荣耀80 GT 骁龙8+旗舰芯 超帧独显芯片 120Hz原画超帧屏 IMX800主摄 5G手机",
    price:3999,
    img:"https://img14.360buyimg.com/n7/jfs/t1/150852/37/28516/44646/63ac4304Fbcdf626d/967526693df561ed.jpg"
  },{
    name:"realme真我GT Neo5 240W光速秒充 觉醒光环系统 144Hz 1.5K直屏 骁龙8+ 5G芯",
    price:999,
    img:"https://img13.360buyimg.com/n7/jfs/t1/218126/29/24427/38471/641c1b4dFbddb2a67/62a94fea8f6b2476.jpg"
  },{
    name:"Redmi K40S 骁龙870 三星E4 AMOLED 120Hz直屏 OIS光学防抖 67W快充 幻镜",
    price:2980,
    img:"https://img13.360buyimg.com/n7/jfs/t1/105783/17/37256/50521/6421a2a9Fdbe153ae/670d18f4b3a6bfc3.jpg"
  }];

  // 解析数据，拼接页面结构，将解析出的数据，拼接到指定位置
  var str = "";
  for(var i=0;i<arr.length;i++){
    str += '<div class="goods"><img src="' + arr[i].img + '" alt=""><p>' + arr[i].name + '</p><p>'+ arr[i].price +'</p></div>';
  }

  // 渲染到页面
  document.write("<div class='box'>"+ str +"</div>");


  // 注意字符串拼接
  

</script>
</html>